<!DOCTYPE html>
<html>
<head>
    <title>产品列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <link rel="stylesheet" href="lib/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header fixed-top'>
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required>
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText"
                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索您想要的商品</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
    <div class="pro-sort">
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder NormalCss">综合</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder SortAscCss">按销量</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder SortDescCss">按价格</i></div>
            </div>
        </div>
    </div>
</header>

<!--主体-->
<div class="weui-content" style="padding-top:85px;">
    <!--产品列表--滑动加载-->
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>
    <div class="wy-Module">
        <div class="wy-Module-con">
            <ul class="wy-pro-list clear" id="list">
                <li>
                    <a href="pro_info.html">
                        <div class="proimg"><img src="pic/cp01.jpg"></div>
                        <div class="protxt">
                            <div class="name">新鲜大水果</div>
                            <div class="wy-pro-pri">¥66.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="pro_info.html">
                        <div class="proimg"><img src="pic/cp02.jpg"></div>
                        <div class="protxt">
                            <div class="name">新鲜大水果</div>
                            <div class="wy-pro-pri">¥66.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="pro_info.html">
                        <div class="proimg"><img src="pic/cp03.jpg"></div>
                        <div class="protxt">
                            <div class="name">新鲜大水果</div>
                            <div class="wy-pro-pri">¥66.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="pro_info.html">
                        <div class="proimg"><img src="pic/cp04.jpg"></div>
                        <div class="protxt">
                            <div class="name">新鲜大水果</div>
                            <div class="wy-pro-pri">¥66.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="pro_info.html">
                        <div class="proimg"><img src="pic/cp05.jpg"></div>
                        <div class="protxt">
                            <div class="name">新鲜大水果</div>
                            <div class="wy-pro-pri">¥66.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="pro_info.html">
                        <div class="proimg"><img src="pic/cp06.jpg"></div>
                        <div class="protxt">
                            <div class="name">新鲜大水果</div>
                            <div class="wy-pro-pri">¥66.00</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="weui-loadmore">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>

<div class="weui-tabbar wy-foot-menu">
    <a href="index.html" class="weui-tabbar__item weui-bar__item--on">
        <div class="weui-tabbar__icon foot-menu-home"></div>
        <p class="weui-tabbar__label">首页</p>
    </a>
    <a href="classify.html" class="weui-tabbar__item">
        <div class="weui-tabbar__icon foot-menu-list"></div>
        <p class="weui-tabbar__label">分类</p>
    </a>
    <a href="shopcart.html" class="weui-tabbar__item">
        <div class="weui-tabbar__icon foot-menu-search"></div>
        <p class="weui-tabbar__label">搜索</p>
    </a>
    <a href="mine.html" class="weui-tabbar__item">
        <div class="weui-tabbar__icon foot-menu-member"></div>
        <p class="weui-tabbar__label">我的</p>
    </a>
</div>

<script src="lib/jquery-2.1.4.js"></script>
<script src="lib/fastclick.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>
<script src="js/jquery-weui.js"></script>
<script>
    $(document.body).pullToRefresh().on("pull-to-refresh", function () {
        setTimeout(function () {
            $(document.body).pullToRefreshDone();
        }, 2000);
    });

    var loading = false;
    $(document.body).infinite(100).on("infinite", function () {
        if (loading) return;
        loading = true;
        setTimeout(function () {
            $("#list").append('<li><a href="pro_info.html"><div class="proimg"><img src="pic/cp06.jpg"></div><div class="protxt"><div class="name">新鲜大水果</div><div class="wy-pro-pri">¥66.00</div></div></a></li><li><a href="pro_info.html"><div class="proimg"><img src="pic/cp06.jpg"></div><div class="protxt"><div class="name">新鲜大水果</div><div class="wy-pro-pri">¥66.00</div></div></a></li>');
            loading = false;
        }, 2000);
    });
</script>
</body>
</html>
